<template>
	<view >
		<u-notice-bar v-show="!vuex_user.gameId" mode="horizontal" type="primary" :list="list"></u-notice-bar>
		<view class="user-bg flex justify-center align-center">
			<view class="flex flex-direction align-center ">
				<view class="flex flex-direction align-center " v-if="!vuex_user.nickName">
					<button class=""  @click="wxLogin" withCredentials="true" style="line-height: 1;background: none;">
						<u-avatar
							class="avatar "
							:src="vuex_user.avatarUrl ? vuex_user.avatarUrl : 'https://pic.imgdb.cn/item/61deadcf2ab3f51d918e1521.jpg'"
							size="120"
						></u-avatar>
					</button>
					<button
						class="text-bold margin-bottom-xs text-white"
						@click="wxLogin"
						withCredentials="true"
						style="line-height: 1;background: none;font-size: 28rpx;padding-top: 20rpx;"
					>
						{{ vuex_user.nickName || '点击登录' }}
					</button>
				</view>
				<view class="flex flex-direction align-center" v-else>
					<u-avatar
						class="avatar"
						:src="vuex_user.avatarUrl ? vuex_user.avatarUrl : 'https://pic.imgdb.cn/item/61deadcf2ab3f51d918e1521.jpg'"
						size="120"
					></u-avatar>
					<text class="text-bold margin-tb-xs text-white padding-top-sm text-lg">{{ vuex_user.nickName  }}</text>
				</view>
				<text class="text-white padding-top-xs text-sm mj-cost" v-if="vuex_user.nickName"  @click="showCostInfo()">【费用详情】</text>
			</view>
			<image src="https://cdn.jy520.fun/superbed/2020/09/17/5f6314f2160a154a67cf0745.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>
		<view class="padding-sm   text-grey  bg-white" style="height: 100%;">
			<view class="padding">
				
				<form>
					<view class="cu-form-group bg-gray mj-border" >
						<view class="title">上月费用</view>
						<view class="flex justify-between flex-sub" >
							<view class="flex align-center">{{myFee.payFormula}}</view>
							<view class="flex ">
								<view class='cu-tag margin-right-sm' :class="'line-blue'">{{myFee.payFee}}元</view>
								<u-icon @click="showFeeInfo()" v-show="true" name='question-circle' size="35"></u-icon>
							</view>
						</view>
					</view>
					<view class="cu-form-group bg-gray" >
						<view class="title">昵称</view>
						<input placeholder="登录之后自动显示" disabled="" v-model="form.gameUser" name="gameUser"></input>
					</view>
					<view class="cu-form-group bg-gray">
						<view class="title">游戏ID</view>
						<input :disabled="disable_status"  placeholder="请输入游戏ID" v-model="form.gameId" name="gameId"></input>
						<u-icon @click="showInfo()" v-show="true" name='error-circle' size="35"></u-icon>
					</view>
				</form>
			</view>
			<view class="btn">
				<u-button throttle-time="2000" size="medium" v-if="!disable_status" @click="update()" class="flex-sub" >更新游戏ID</u-button>	
			</view>
		</view>
		<!-- 弹出层 -->
		<template>
			<u-toast ref="uToast" />
			<u-popup v-model="showPopup" mode="bottom" border-radius="15">
				<view class="tag-class">
					<u-tag text="数据每月2号更新(除昨日数据)" type="primary" />
				</view>
				<view class="padding">
					<view class="flex" style="border-radius: 20rpx; overflow: hidden;">
						<form class=" flex-sub">
							<view class="cu-form-group bg-gray">
								<view class="title">总调用数</view>
								<view class="mj-value">{{allFee.totalCall}}次</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">上月调用数</view>
								<view>{{allFee.lastMonthCall}}次</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">收费门槛</view>
								 <view>{{allFee.thresholdName}}</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">昨日调用数</view> 
								<view>{{allFee.lastDayCall}}次</view>
							</view>
						</form>
						<form class=" flex-sub">
							<view class="cu-form-group bg-gray">
								<view class="title">总费用</view>
								<view>{{allFee.totalFee}}元</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">上月总费用</view>
								<view>{{allFee.lastMonthFee}}元</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">上月达标数</view>
								 <view>{{allFee.thresholdTimes}}次</view>
							</view>
							<view class="cu-form-group bg-gray">
								<view class="title">昨日总费用</view> 
								<view>{{allFee.lastDayFee}}元</view>
							</view>
						</form>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
import {
		getUserProfile
	} from "@/api/tabbar/wxLogin.js"
export default {
	data() {
		return {
			count: {},
			list: ['游戏ID为雀神广东麻将结算界面的ID,请确保游戏ID为你本人ID。一旦更新无法再次更新。'],
			form: {
				userName: '',
				openId:'',
				gameId:''
			},
			disable_status:false,
			myFee: {
				payFormula: '',
				payFee:0.0
			}, 
			allFee: {
				totalCall: 0,
				totalFee: 0.0,
				lastMonthCall: 0,
				lastMonthFee: 0.0,
				lastDayCall: 0,
				lastDayFee:0.0,
				thresholdName:''
			},
			showPopup:false
		};
	},
	onLoad() {
		this.form.gameUser = this.vuex_user.gameUser;
		this.form.gameId = this.vuex_user.gameId;
		if(this.form.gameId) {
			this.disable_status = true;
		}
		this.form.openId = this.vuex_user.openId;
	},
	onReady() {
	},
	onShow() {
		this.updateFee(); 
	},
	methods: {
		wxLogin(){
			getUserProfile(this).then((res)=>{
				this.form.gameUser = res.gameUser;
				this.form.gameId = res.gameId;
				this.form.openId = this.vuex_user.openId;
			});
		},
		showInfo() {
			this.$refs.uToast.show({
				title: '游戏ID为雀神广东麻将结算界面的ID',
				type: 'primary',
				duration: 2000
			})
		},
		showFeeInfo() {
			this.$refs.uToast.show({
				title: '(调用次数*单价)*达标次数=上月费用',
				type: 'primary',
				duration: 2000
			})
		},
		showCostInfo(){
			this.showPopup = true;
		},
		updateFee(){
			this.$u.api.queryByName(this.form.gameUser).then((res) => {
				this.myFee = res.data;
			}).catch((error) => {
				console.log(error);
			});
			
			this.$u.api.queryFee().then((res) => {
				this.allFee = res.data;
			}).catch((error) => {
				console.log(error);
			});
		},
		update() {
			if(this.vuex_user.gameUser == undefined) {
				uni.showToast({
					title: '请先登录',
					icon: 'error',
					duration: 2000
				});
				return;
			}
			let _this = this;
			uni.showModal({
			    title: '提示',
			    content: '确保游戏ID为你本人的ID?',
			    success: function (res) {
			        if (res.confirm) {
						_this.$u.api.editGameId(_this.form).then((res) => {
							if(res.code == 500) {
								//保存成功
								uni.showToast({
									title: res.msg,
									icon: 'error',
									duration: 2000
								});
							} else if(res.code == 200 || res.code == 0) {
								_this.$u.vuex("vuex_user.gameId", _this.form.gameId);
								//保存成功
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
							}
						}).catch((error) => {
							console.log(error);
						});
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		}
	}
};
</script>

<style lang="stylus">
page
	background-color #fff
.tag-class
	display:flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	margin-bottom: -10px;
.user-bg
	width 100%
	height 450rpx
	background-image url('https://cdn.nlark.com/yuque/0/2019/png/280373/1570690136927-assets/web-upload/d4a1114b-f3ef-4845-8e89-a815092e108f.png')
	background-position center
	background-repeat no-repeat
	background-size 100% 100%
	position relative
	.gif-wave
		position absolute
		width 100%
		bottom 0
		left 0
		z-index 99
		mix-blend-mode screen
		height 100rpx
.user-box
	background-color #fff
.UCenter-bg
	background-image url('https://image.weilanwl.com/color2.0/index.jpg') // image.weilanwl.com/color2.0/index.jpg);
	background-size cover
	height 550rpx
	display flex
	justify-content center
	padding-top 40rpx
	overflow hidden
	position relative
	flex-direction column
	align-items center
	color #fff
	font-weight 300
	text-shadow 0 0 3px rgba(0, 0, 0, 0.3)
.UCenter-bg text
	opacity 0.8
.UCenter-bg image
	width 200rpx
	height 200rpx
.UCenter-bg .gif-wave
	position absolute
	width 100%
	bottom 0
	left 0
	z-index 99
	mix-blend-mode screen
	height 100rpx
map, .mapBox
	left 0
	z-index 99
	mix-blend-mode screen
	height 100rpx
map, .mapBox
	width 750rpx
	height 300rpx
button::after
	border 0
.cu-list.menu>.cu-item
	min-height 95rpx
.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
.btn
	display: flex;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin: auto;
.mj-border
	border-bottom 5rpx dashed #fff 
.mj-cost
	border-bottom 2rpx solid #ffaa00
	color #ffaa00
</style>
